<script
 lang="ts" setup
>
import { useClipboard } from '@vueuse/core'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const inputText = ref('')
const outputText = ref('')
const mode = ref<'encode' | 'decode'>('encode')

const { copy } = useClipboard()

function processText() {
  if (!inputText.value.trim()) {
    ElMessage.warning('请输入需要处理的文本')
    return
  }

  try {
    if (mode.value === 'encode') {
      // 编码为Base64
      outputText.value = btoa(encodeURIComponent(inputText.value))
    }
    else {
      // 从Base64解码
      outputText.value = decodeURIComponent(atob(inputText.value))
    }
  }
  catch (error) {
    ElMessage.error(`Base64${mode.value === 'encode' ? '编码' : '解码'}失败: ${(error as Error).message}`)
  }
}

function copyResult() {
  if (!outputText.value) {
    ElMessage.warning('没有可复制的内容')
    return
  }

  copy(outputText.value)
  ElMessage.success('已复制到剪贴板')
}

function clearAll() {
  inputText.value = ''
  outputText.value = ''
}

function swapTexts() {
  // 将输出结果放入输入框，方便连续操作
  if (outputText.value) {
    inputText.value = outputText.value
    outputText.value = ''
  }
}
</script>

<template>
  <div class="mx-auto p-6">
    <div class="flex flex-col space-y-6">
      <!-- 输入区域 -->
      <div>
        <div class="mb-2 flex items-center">
          <span class="text-gray-700 font-medium">输入文本</span>
          <div class="ml-auto text-xs text-gray-500">
            {{ inputText.length }} 个字符
          </div>
        </div>
        <textarea
          v-model="inputText"
          class="h-64 w-full border rounded p-2 font-mono"
          placeholder="请输入需要处理的文本"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-wrap justify-center gap-4">
        <div class="mr-4 flex items-center gap-2">
          <label class="inline-flex items-center">
            <input
              v-model="mode"
              type="radio"
              value="encode"
              class="form-radio"
            >
            <span class="ml-2">Base64编码</span>
          </label>
          <label class="ml-4 inline-flex items-center">
            <input
              v-model="mode"
              type="radio"
              value="decode"
              class="form-radio"
            >
            <span class="ml-2">Base64解码</span>
          </label>
        </div>

        <button
          class="flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-2.5 text-white shadow-sm transition-colors hover:bg-blue-700"
          @click="processText"
        >
          <i class="el-icon-refresh-right" />{{ mode === 'encode' ? '编码' : '解码' }}
        </button>
        <button
          class="flex items-center gap-2 rounded-lg bg-gray-600 px-6 py-2.5 text-white shadow-sm transition-colors hover:bg-gray-700"
          @click="swapTexts"
        >
          <i class="el-icon-top" />结果转输入
        </button>
        <button
          class="flex items-center gap-2 rounded-lg bg-red-600 px-6 py-2.5 text-white shadow-sm transition-colors hover:bg-red-700"
          @click="clearAll"
        >
          <i class="el-icon-delete" />清空
        </button>
      </div>

      <!-- 输出结果 -->
      <div v-if="outputText" class="mt-4">
        <div class="mb-2 flex items-center">
          <span class="text-gray-700 font-medium">处理结果</span>
          <div class="ml-auto text-xs text-gray-500">
            {{ outputText.length }} 个字符
          </div>
        </div>
        <textarea
          v-model="outputText"
          class="h-64 w-full border rounded p-2 font-mono"
          readonly
        />
        <button
          class="mt-4 flex items-center gap-2 rounded-lg bg-green-600 px-6 py-2.5 text-white shadow-sm transition-colors hover:bg-green-700"
          @click="copyResult"
        >
          <i class="el-icon-document-copy" />复制结果
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义样式 */
.form-radio {
  position: relative;
  width: 1.2em;
  height: 1.2em;
  appearance: none;
  cursor: pointer;
  outline: none;
  border: 1px solid #cbd5e0;
  border-radius: 50%;
}

.form-radio:checked {
  background-color: #4299e1;
  border-color: #4299e1;
}

.form-radio:checked::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  content: "";
  background-color: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
</style>
